<template>
	<div @click.stop="onClickHandler()" :class="[selected ?'row-selected-state ': 'row-normal-state ']"
		style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<i class="el-icon-s-grid" style="position: absolute;right: 0px;top:-6px;" @click="onIconClickHandler"></i>
		<van-button type="primary" size="small" v-show="componentModel.editable">增加</van-button>
		<van-row>
			<slot></slot>
		</van-row>
		<el-dialog v-model="dialogVisible" title="配置" width="50%">
			<el-row>
				图片域
				<el-select size="mini" v-model="imageField" placeholder="请选择"  clearable  filterable>
					<el-option v-for="item in columnConfigList" :key="item.columnName" :label="item.name" :value="item.columnName">
					</el-option>
				</el-select>
			</el-row>
			<el-table stripe border show-overflow-tooltip="true" :data="columnConfigList" style="width: 100%;margin-top: 10px;"
				size="mini" max-height="250">
				<el-table-column label="列名" prop="columnName">
				</el-table-column>
				<el-table-column label="名称" prop="name">
				</el-table-column>
				<el-table-column label="选择" prop="selected">
					<template v-slot="scope">
						<el-checkbox v-model="scope.row.selected" style="height: 24px;"></el-checkbox>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" size="mini" @click="onColumnConfigOk">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import constants from '@/utils/constants.js';
	import ListViewResetChildrenCommand from '../command/ListViewResetChildrenCommand.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignListViewComponent",
		props: [
			"componentModel"
		],
		data() {
			return {
				dialogVisible: false,
				editable: false,
				columnConfigList: [],
				selected: false,
				tableName:"",
				imageField:"",
				treeTable:false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					},
					{
						"key": "editable",
						"label": "可编辑",
						"editor": "checkbox"
					},
					{
						"key": "pageable",
						"label": "分页",
						"editor": "checkbox"
					},
					{
						"key": "onPagination",
						"label": "分页事件",
						"editor": "textarea"
					},
					{
						"key": "formPageCode",
						"label": "表单页面",
						"editor": "text"
					}
				]
			}
		},
		beforeMount() {
			if (this.componentModel.editable == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"editable",false);
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if (propertyKey == "ID") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				} else if (propertyKey == "editable") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"editable");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "editable") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"editable",propertyValue);
				}
			},
			onIconClickHandler() {
				var dataSource = this.getPropertyValue("dataSource");
				if (dataSource == undefined || dataSource == "") {
					this.$alert("请选择数据源", "提示");
					return;
				}
				this.columnConfigList = [];
				var editable = this.getPropertyValue("editable");
				if (editable == undefined) {
					editable = false;
				}
				this.editable = editable;
				var dataSourceList = this.$store.state.mformDesigner.$refs.dataSourceConfig.datasourceList;
				for (var i = 0; i < dataSourceList.length; i++) {
					if (dataSourceList[i].id == dataSource) {
						this.tableName = dataSourceList[i].tableName;
						break;
					}
				}
				var that = this;
				this.axios.get(constants.ROOT_URL + "devformdesigner/initColumnConfig?tableName=" + this.tableName +
					"&editable=" + editable).then(
					function(response) {
						if (response.data.code == 1) {
							that.columnConfigList = response.data.columnConfigList;
							that.treeTable=response.data.treeTable;
						}
					});
				this.dialogVisible = true;
			},
			onColumnConfigOk() {
				this.dialogVisible = false;
				var dataSource = this.getPropertyValue("dataSource");
				formDesignerUtil.clearChildren(this.componentModel)
				var children = [];
				var fieldParent=this.componentModel;
				if(!this.editable){
					if(this.imageField!=""){
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var row={
							"type": "row",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"children": []
						}
						children.push(row);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var col16={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":16,
							"children": []
						}
						row.children.push(col16);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var col8={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":8,
							"children": []
						}
						row.children.push(col8);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var imageRow={
							"type": "row",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"children": []
						}
						col16.children.push(imageRow);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var imageCol8={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":8,
							"children": []
						}
						imageRow.children.push(imageCol8);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var imageCol16={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":16,
							"children": []
						}
						imageRow.children.push(imageCol16);
						fieldParent=imageCol16;
						
						var imageFieldName="";
						for(var i=0;i<this.columnConfigList.length;i++){
							if(this.columnConfigList[i].columnName==this.imageField){
								imageFieldName=this.columnConfigList[i].name;
								break;
							}
						}
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var field = {
							"type": "image",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"propertyMap": {
								"dataSource": dataSource,
								"dataField": this.imageField
							},
							"children": [],
							"labelExpression": imageFieldName
						}
						imageCol8.children.push(field);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var detailButton = {
							"type": "button",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"propertyMap": {
								"onClickExpression": "@mListViewPageBean.dataEdit('mobile_"+this.tableName+"_formview')",
							},
							"labelExpression":"详情",
							"children": [],
						}
						col8.children.push(detailButton);
					}else{
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						row={
							"type": "row",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"children": []
						}
						children.push(row);
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						col16={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":16,
							"children": []
						}
						row.children.push(col16);
						fieldParent=col16;
				
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						col8={
							"type": "col",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"col":8,
							"children": []
						}
						row.children.push(col8);
						
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var detailClickExpression="@mListViewPageBean.dataEdit('mobile_"+this.tableName+"_formview')";
						if(this.treeTable){
							detailClickExpression="mTreeListViewPageBean.dataEdit('mobile_"+this.tableName+"_formview')";
						}
						detailButton = {
							"type": "button",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"propertyMap": {
								"onClickExpression": detailClickExpression,
							},
							"labelExpression":"详情",
							"children": [],
						}
						col8.children.push(detailButton);
						
						if(this.treeTable){
							this.$store.state.mformDesigner.createContext.currentComponentId++;
							var childrenButton = {
								"type": "button",
								"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
								"propertyMap": {
									"onClickExpression":"@mTreeListViewPageBean.getChildren()",
								},
								"labelExpression":"下级",
								"children": [],
							}
							col8.children.push(childrenButton);
						}
					}
				}
				for (i = 0; i < this.columnConfigList.length; i++) {
					if (this.columnConfigList[i].selected == true) {
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						var div = {
							"type": "div",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"propertyMap": {
								"cssStyleExpression": "width:100%;"
							},
							"children": []
						}
						if(fieldParent==this.componentModel){
								children.push(div);
						}else{
								fieldParent.children.push(div);
						}
						this.$store.state.mformDesigner.createContext.currentComponentId++;
						field = {
							"type": "label",
							"id": "component" + this.$store.state.mformDesigner.createContext.currentComponentId,
							"propertyMap": {
								"dataSource": dataSource,
								"dataField": this.columnConfigList[i]["columnName"]
							},
							"children": [],
							"labelExpression": this.columnConfigList[i]["name"]
						}
						div.children.push(field);
					}
				}
				this.$nextTick(function() {
					var command = new ListViewResetChildrenCommand();
					command.setListViewComponentModel(this.componentModel);
                    command.setListViewChildrenModel(children);
					command.execute();
				});
			}
		}
	}
</script>

<style>

</style>
